<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>mui主页面</title>
    <link rel="stylesheet" href="../css/mui-3.6.1.min.css" type="text/css">
    <link rel="stylesheet" href="../css/login_register.css" type="text/css">
    <script src="../js/mui-3.6.1.min.js"></script>
    <script src="../js/swiper-3.4.2.min.js"></script>
</head>
<body>
<div class="topbar-between horizontal-view gradient-color">
    <div class="topbar-back" onclick="">
        <div class="topbar-back-icon"></div>
    </div>
    <div class="topbar-title">主页面</div>
    <div style="width: 2.5rem;"></div>
</div>
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;" onclick="openWindow1()">
            <img class="mui-media-object mui-pull-left" src="../image/home_menu_bendishenghuo@2x.png">
            <div class="mui-media-body">
                幸福
                <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;" onclick="openWindow2()">
            <img class="mui-media-object mui-pull-left" src="../image/home_menu_bendishenghuo@2x.png">
            <div class="mui-media-body">
                木屋
                <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;" onclick="openWindow1()">
            <img class="mui-media-object mui-pull-left" src="../image/home_menu_bendishenghuo@2x.png">
            <div class="mui-media-body">
                CBD
                <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
        </a>
    </li>
</ul>
<script type="text/javascript" src="../js/mui-3.6.1.min.js"></script>
<script type="text/javascript">
    mui.init({
        /*        subpages: [{
         url: 'jquery_mobile.html',//子页面HTML地址，支持本地地址和网络地址
         id: 'jquery_mobile.html',//子页面标志
         styles: {
         top: '45px',//子页面顶部位置
         bottom: '50px'//子页面底部位置
         //width: ,//子页面宽度，默认为100%
         //height: ,//子页面高度，默认为100%
         },
         extras: {}//额外扩展参数
         }]*/
    });

    function openWindow2() {
        mui.openWindow({
            url: 'mui_open1.html',
            id: 'mui_open1.html',
            styles: {
                top: 0,//新页面顶部位置
                bottom: 0,//新页面底部位置
                //width: ,//新页面宽度，默认为100%
                //height: ,//新页面高度，默认为100%
            },
            extras: {
                //自定义扩展参数，可以用来处理页面间传值
            },
            createNew: true,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
            show: {
                autoShow: true,//页面loaded事件发生后自动显示，默认为true
                aniShow: 'slide-in-right',//页面显示动画，默认为”slide-in-right“；
                duration: 200,//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
                event: 'titleUpdate',//页面显示时机，默认为titleUpdate事件时显示
                extras: {}//窗口动画是否使用图片加速
            },
            waiting: {
                autoShow: true,//自动显示等待框，默认为true
                title: '正在加载...',//等待对话框上显示的提示内容
                options: {
                    //width:,//等待框背景区域宽度，默认根据内容自动计算合适宽度
                    //height:,//等待框背景区域高度，默认根据内容自动计算合适高度
                }
            }
        })
    }
    function openWindow1() {
        mui.openWindowWithTitle({
            url: 'mui_open1.html',
            id: 'mui_open1.html'//WebviewOptions
        }, {
            id: "hello",//导航栏ID,默认为title,若不指定将会使用WebviewOptions中指定的 [webviewID+ "_title"] 作为id
            height: "45px",//导航栏高度值
            backgroundColor: "#f7f7f7",//导航栏背景色
            bottomBorderColor: "#cccccc",//底部边线颜色
            title: {//标题配置
                text: "hello",//标题文字
                position: { //绘制文本的目标区域，参考：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Rect
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "100%"
                },
                styles: {//绘制文本样式，参考：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.TextStyles
                    color: "#000000",
                    align: "center",
                    family: "'Helvetica Neue',Helvetica,sans-serif",
                    size: "17px",
                    style: "normal",
                    weight: "normal",
                    fontSrc: ""
                }
            },
            back: {//左上角返回箭头
                image: {//图片格式
                    base64Data: '',//加载图片的Base64编码格式数据 base64Data 和 imgSRC 必须指定一个.否则不显示返回箭头
                    imgSrc: '',//要加载的图片路径
                    sprite: {//图片源的绘制区域，参考：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Rect
                        top: '0px',
                        left: '0px',
                        width: '100%',
                        height: '100%'
                    },
                    position: {//绘制图片的目标区域，参考：http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Rect
                        top: "10px",
                        left: "10px",
                        width: "24px",
                        height: "24px"
                    }
                },
                click: function () {
                    //重写 点击返回图标时执行的回调函数，默认执行mui.back();
                }
            }
        })
    }

    //tap为mui封装的单击事件，可参考手势事件章节
//    document.getElementById('info').addEventListener('tap', function () {
//        //打开关于页面
//        mui.openWindow({
//            url: 'examples/info.html',
//            id: 'info'
//        });
//    });
</script>
</body>
</html>